<template>
    <div class="itxst">
        <string>vuedraggable 拖拽组件</string>
        <div class="group">
            <draggable :list="state.modules.group2" ghost-class="ghost" handle=".move" filter=".forbid"
                :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd"
                group="group2" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50"
                :fallback-tolerance="50" :move="onMove">
                <template #item="{ element }">
                    <div :class="element.disabledMove ? 'forbid item' : 'item'">
                        <label class="move">{{ element.name }}</label>
                        <p>内容....</p>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="tipStyle">
            <strong><a href="https://github.com/SortableJS/vue.draggable.next">vuedraggable 拖拽组件</a></strong> <br />
            效果：https://sortablejs.github.io/vue.draggable.next/#/clone-on-control <br />

            中文文档：https://www.itxst.com/vue-draggable-next/workbench.html <br />
            代码实例：<br />

            &lt;draggable :list="state.modules.group2" ghost-class="ghost" handle=".move" filter=".forbid" <br />
                :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" <br />
                group="group2" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" <br />
                :fallback-tolerance="50" :move="onMove"&gt; <br />
                &lt;template #item="{ element }"&gt; <br />
                &lt;div :class="element.disabledMove ? 'forbid item' : 'item'"&gt; <br />
                &lt;label class="move"&gt;\{\{\ element.name\ }\}\&lt;/label&gt; <br />
                &lt;p&gt;内容....&lt;/p&gt; <br />
                &lt;/div&gt; <br />
                &lt;/template&gt; <br />
                &lt;/draggable&gt; <br />
                数据格式：<br />
                const state = reactive({<br />
                    modules: {<br />
                    group2: [{name:"",id:1}]<br />
                    }<br />
                });<br />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue";
//导入draggable组件
import draggable from "vuedraggable";

const state = reactive({
    /*工作台的数据结构
      disabledMove:禁止移动
      disabledPark:禁止停靠
    */
    modules: {
        group2: [
            { name: "订单", id: 5, disabledMove: false, disabledPark: false },
            { name: "员工", id: 6, disabledMove: false, disabledPark: false },
            { name: "报表", id: 7, disabledMove: false, disabledPark: false },
        ]
    },
});

//拖拽开始的事件
const onStart = () => {
    console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
    console.log("结束拖拽");
};

const onMove = (e, originalEvent) => {
    //不允许停靠
    if (e.relatedContext.element.disabledPark == true) return false;

    return true;
};
</script>
<style >
body {
    padding: 0px;
    margin: 0px;
    background-color: #f1f1f1;
}
.itxst{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.group {
    width: 32%;
}

.item {
    border: solid 1px #ddd;
    padding: 0px;
    text-align: left;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    user-select: none;
}

.item>label {
    border-bottom: solid 1px #ddd;
    padding: 6px 10px;
    color: #333;
}

.item>label:hover {
    cursor: move;
}

.item>p {
    padding: 6px 10px;
    color: #666;
}

.ghost {
    border: solid 1px rgb(19, 41, 239) !important;
}

.chosenClass {
    opacity: 1;
    border: solid 1px red;
}
</style>